<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-if="headerShow">
        <a-form size="small" :model="pageData" layout="inline">
          <a-form-item label="设备名称">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              placeholder=""
              v-model="dropDownData"
              @press-enter="huiche"
            />
          </a-form-item>
        </a-form>
        <div>
          <Toolbar
            :items="['查询', '新增', '删除']"
            @add="addHandler"
            @del="deleteHandler"
            @select="selectHandler"
          >
          </Toolbar>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <!-- <a-tabs   :justify="true" default-active-key="1">
                <a-tab-pane key="1" title="保养类型列表"> -->
      <AgGridVuesCopys
        :rowHeight="33"
        :headerHeight="33"
        :suppressCopyRowsToClipboard="true"
        rowSelection="multiple"
        @grid-ready="gridReady"
        style="height: calc(100% - 45px)"
        :defaultColDef="defaultColDef"
        class="ag-theme-alpine"
        :rowData="tableDataList"
        :columnDefs="tc"
        :localeText="localeText1"
      >
      </AgGridVuesCopys>
      <paginationCopys
        :total="fySelet.total"
        show-total
        show-jumper
        show-page-size
        @change="PageSize"
        @page-size-change="change"
        style="justify-content: center"
        :page-size="fySelet.size"
        :current="fySelet.page"
      />
      <!-- </a-tab-pane>
            </a-tabs> -->
    </template>

    <a-drawer
      style="z-index: 999"
      ok-text="保存"
      cancel-text="关闭"
      :drawer-style="{ zIndex: 9999 }"
      :mask-closable="false"
      :width="400"
      :ok-loading="pageData.pageLoading"
      :visible="showAdd"
      unmountOnClose
      @ok="addOk"
      @cancel="showAdd = false"
    >
      <template #title>
        {{ sideTitle }}
      </template>
      <div>
        <a-form ref="formRef" :model="dataForm">
          <a-form-item
            label-col-flex="80px"
            label="机台类型"
            field="machineTypeIdAndName"
            :rules="[{ required: true, message: '类型名称必填' }]"
            :validate-trigger="['change', 'blur']"
          >
            <a-select
              popup-container="html"
              :style="{ width: '250px' }"
              class="bacClass"
              v-model="dataForm.machineTypeIdAndName"
              @click="byTypeClick"
              allow-clear
              allow-search
            >
              <a-option v-for="item in byTypeList" :value="item.id + '-' + item.typeName">{{
                item.typeName
              }}</a-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label-col-flex="80px"
            label="机台名称"
            field="machineIdAndNameAndCode"
            :rules="[{ required: true, message: '机台名称必填' }]"
            :validate-trigger="['change', 'blur']"
          >
            <a-select
              popup-container="html"
              :style="{ width: '250px' }"
              class="bacClass"
              v-model="dataForm.machineIdAndNameAndCode"
              @click="macTypeClick"
              allow-clear
              allow-search
              :disabled="!dataForm.machineTypeIdAndName"
              @change="macTypeChange"
            >
              <a-option
                v-for="item in macTypeList"
                :value="item.id + '-' + item.machineName + '-' + item.machineCode"
                >{{ item.machineCode + '-' + item.machineName }}</a-option
              >
            </a-select>
          </a-form-item>
          <a-form-item
            label-col-flex="80px"
            label="机台编号"
            field="machineCode"
            :rules="[{ required: true, message: '编号必填' }]"
            :validate-trigger="['change', 'blur']"
          >
            <a-input
              :style="{ width: '250px' }"
              class="bacClass"
              v-model="dataForm.machineCode"
              disabled
            ></a-input>
          </a-form-item>
          <a-form-item
            label-col-flex="80px"
            label="保养模板"
            field="keepTemplateIdAndName"
            :rules="[{ required: true, message: '保养模板必填' }]"
            :validate-trigger="['change', 'blur']"
          >
            <a-select
              popup-container="html"
              :style="{ width: '250px' }"
              class="bacClass"
              v-model="dataForm.keepTemplateIdAndName"
              @click="byTypeNameClick"
              allow-clear
              allow-search
            >
              <a-option v-for="item in byTypeNameList" :value="item.id + '-' + item.templateName">{{
                item.templateName
              }}</a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>

<script setup lang="ts">
  import { post, get } from '@/api/http'
  import { ref, reactive, onMounted, toRefs } from 'vue'
  import Toolbar from '@/components/Toolbar.vue'
  
  import { Message, Modal } from '@arco-design/web-vue'
  import { localeText } from '@/api/aggridZw'
  const localeText1: any = ref(localeText)

  const headerShow = ref(true)

  const pageData: any = reactive({
    dropDownData: '',
    showAdd: false,
    sideTitle: '',
  })

  const { dropDownData, showAdd, sideTitle } = toRefs(pageData)

  const dataForm: any = reactive({
    id: null,
    machineTypeId: null,
    machineTypeName: '',
    machineTypeIdAndName: '',
    keepTemplateName: '',
    keepTemplateId: null,
    keepTemplateIdAndName: '',
    machineId: null,
    machineName: '',
    machineIdAndNameAndCode: '',
    machineCode: '机台编码',
  })

  function selectList() {
    post({
      url: 'zcTemRepair/machineTemplate/infoMachineTemplatePage',
      data: {
        page: fySelet.page,
        limit: fySelet.size,
        machineName: pageData.dropDownData,
      },
    }).then((res: any) => {
      gridOption.value.setRowData(res.data.list)
      fySelet.total = res.data.total
    })
  }

  const huiche = () => {}

  const selectHandler = () => {
    selectList()
  }

  const addHandler = () => {
    for (let i in dataForm) {
      dataForm[i] = ''
    }
    pageData.sideTitle = '新增设备保养模板'
    pageData.showAdd = true
  }

  const deleteHandler = () => {
    if (gridOption.value.getSelectedRows().length === 0) {
      return false
    }
    Modal.confirm({
      title: '系统提示',
      content: '确认删除选中的数据?',
      onOk() {
        post({
          url: 'zcTemRepair/machineTemplate/deleteMachineTemplate',
          data: gridOption.value.getSelectedRows().map((o: any) => {
            return o.id
          }),
        }).then(({ code, data }: any) => {
          if (code === 200) {
            Message.success({
              content: '删除成功',
              duration: 5000,
            })
            fySelet.page = 1
            selectList()
          } else {
            Message.error({
              content: '删除失败',
              duration: 5000,
            })
          }
        })
      },
    })
  }

  const tableDataList: any = ref([])
  const gridOption = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
  }
  const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    flex: 1,
  }

  const fySelet: any = reactive({
    total: 10,
    size: 10,
    page: 1,
  })

  const PageSize = (val: any) => {
    fySelet.page = val
    selectList()
  }

  const change = (val: any) => {
    fySelet.size = val
    selectList()
  }

  const tc = [
    {
      showRowGroup: 'hide_def',
      headerName: '',
      checkboxSelection: true,
      headerCheckboxSelection: true,
      pinned: 'left',
      width: 50,
      resizable: false,
      filter: false,
      sortable: false,
      minWidth: 50,
      maxWidth: 50,
      lockPosition: 'left',
    },
    // {
    //     headerName: '序号',
    //     field: 'id',
    //     // pinned: o['fixed'],
    //     width: 150
    // },
    {
      headerName: '机台编号',
      field: 'machineCode',
      width: 150,
    },
    {
      headerName: '机台名称',
      field: 'machineName',
      width: 150,
    },
    {
      headerName: '设备机型',
      field: 'machineTypeName',
      width: 150,
    },
    {
      headerName: '模板名称',
      field: 'keepTemplateName',
      width: 150,
    },
    {
      headerName: '创建人',
      field: 'createName',
      width: 150,
    },
    {
      headerName: '创建时间',
      field: 'createTime',
      width: 150,
    },
    {
      headerName: '最后修改人',
      field: 'updateName',
      width: 150,
    },
    {
      headerName: '最后修改时间',
      field: 'updateTime',
      width: 150,
    },
    {
      headerName: '操作',
      field: 'slot',
      pinned: 'right',
      width: 120,
      cellRenderer: {
        template: `
            <a-space>
                <a-tag class="tagCss" @click="a">修 改</a-tag>
            </a-space>
            `,
        setup(props: any) {
          const a = () => {
            updateList(props.params.data) // props.params.data
          }
          return {
            a,
          }
        },
      },
    },
  ]

  const formRef: any = ref()

  const addOk = () => {
    if (pageData.sideTitle == '新增设备保养模板') {
      formRef.value?.validate().then((err: any) => {
        if (!err) {
          post({
            url: 'zcTemRepair/machineTemplate/saveMachineTemplate',
            data: [
              {
                machineTypeId: Number(dataForm.machineTypeIdAndName.split('-')[0]),
                machineTypeName: dataForm.machineTypeIdAndName.split('-')[1],
                keepTemplateName: dataForm.keepTemplateIdAndName.split('-')[1],
                keepTemplateId: Number(dataForm.keepTemplateIdAndName.split('-')[0]),
                machineName: dataForm.machineIdAndNameAndCode.split('-')[1],
                machineCode: dataForm.machineIdAndNameAndCode.split('-')[2],
                machineId: Number(dataForm.machineIdAndNameAndCode.split('-')[0]),
              },
            ],
          }).then((res: any) => {
            if (res.code == 200) {
              Message.success('成功')
              pageData.showAdd = false
              selectList()
            } else {
              Message.error(res.message)
            }
          })
        }
      })
    } else {
      formRef.value?.validate().then((err: any) => {
        if (!err) {
          post({
            url: 'zcTemRepair/machineTemplate/updateMachineTemplate',
            data: [
              {
                id: dataForm.id,
                machineTypeId: Number(dataForm.machineTypeIdAndName.split('-')[0]),
                machineTypeName: dataForm.machineTypeIdAndName.split('-')[1],
                keepTemplateName: dataForm.keepTemplateIdAndName.split('-')[1],
                keepTemplateId: Number(dataForm.keepTemplateIdAndName.split('-')[0]),
                machineName: dataForm.machineIdAndNameAndCode.split('-')[1],
                machineCode: dataForm.machineIdAndNameAndCode.split('-')[2],
                machineId: Number(dataForm.machineIdAndNameAndCode.split('-')[0]),
              },
            ],
          }).then((res: any) => {
            if (res.code == 200) {
              Message.success('成功')
              pageData.showAdd = false
              selectList()
            } else {
              Message.error(res.message)
            }
          })
        }
      })
    }
  }

  const updateList = (e: any) => {
    for (let i in e) {
      dataForm[i] = e[i]
    }
    byTypeNameClick()
    byTypeClick()
    macTypeClick()
    dataForm.machineTypeIdAndName = dataForm.machineTypeId + '-' + dataForm.machineTypeName
    dataForm.keepTemplateIdAndName = dataForm.keepTemplateId + '-' + dataForm.keepTemplateName
    dataForm.machineIdAndNameAndCode =
      dataForm.machineId + '-' + dataForm.machineName + '-' + dataForm.machineCode
    pageData.sideTitle = '修改设备保养模板'
    pageData.showAdd = true
  }

  const byTypeNameList: any = ref([])

  const byTypeNameClick = () => {
    post({
      url: 'zcTemRepair/upkeepTemplate/selectUpkeepTemplate',
    }).then((res: any) => {
      if (res.code == 200) {
        byTypeNameList.value = res.data.list
      } else {
        Message.error(res.message)
      }
    })
  }

  const byTypeList: any = ref([])

  const byTypeClick = () => {
    post({
      url: 'planSingle/machineType/getFieldValue',
      data: {
        typeName: '',
      },
    }).then((res: any) => {
      if (res.code == 200) {
        byTypeList.value = res.data
      } else {
        Message.error(res.message)
      }
    })
  }

  const macTypeList: any = ref([])

  const macTypeClick = () => {
    post({
      url: 'planSingle/machine/getMachinePara',
      data: {
        machineTypeName: dataForm.machineTypeIdAndName.split('-')[1] || '',
      },
    }).then((res: any) => {
      if (res.code == 200) {
        macTypeList.value = res.data
      } else {
        Message.error(res.message)
      }
    })
  }

  const macTypeChange = (v: any) => {
    dataForm.machineCode = v.split('-')[2]
  }
</script>
<style scoped lang="less">
  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }

  :deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }
</style>
